<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="importmap">
      {
        "imports": {
          "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs"
        }
      }
    </script>
    <script type="module">
      import { waitFor } from '@testduet/wait-for';

      run(async function () {
        const ponyfill = lolex.createClock();
        const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill });

        WebChat.renderWebChat(
          {
            directLine,
            ponyfill,
            sendTypingIndicator: true,
            store
          },
          document.querySelector('main')
        );

        await pageConditions.webChatRendered();

        // Wait for "Connecting..." message to dismiss
        ponyfill.tick(600);

        await pageConditions.uiConnected();

        const { activity: activity1 } = await directLine.actPostActivity(async () => {
          // WHEN: Type "ABC" in the send box.
          await host.click(pageElements.sendBoxTextBox());
          await host.sendKeys('Hello, World!');
        });

        // THEN: Typing indicator should not be shown.
        expect(pageElements.typingIndicator()).toBeFalsy();

        // WHEN: After 3 seconds.
        const { activity: activity2 } = await directLine.actPostActivity(async () => {
          ponyfill.tick(3_000);
        });

        // THEN: Typing indicator should not be shown.
        expect(pageElements.typingIndicator()).toBeFalsy();

        await host.snapshot('local');
      });
    </script>
  </body>
</html>
